<template>
    <div class="category">
        <ul>
            <li :class="{active: !parentSelected.id}" @click="selectParent({})">全部</li>
            <li v-for="(category, index) in parentList" :key="index"
                :class="{active: category.id == parentSelected.id}" @click="selectParent(category)">{{ category.name }}</li>
        </ul>
        <ul v-if="parentSelected.id">
            <li :class="{active: !childrenSelected.id}" @click="selectChildren({})">全部</li>
            <li v-for="(category, index) in childrenList" :key="index"
            :class="{active: category.id == childrenSelected.id}" @click="selectChildren(category)">{{ category.name }}</li>
        </ul>
    </div>
    <div class="goodsList">
        <ul>
            <li v-for="(goods, index) in pageInfo.list" :key="index" @click="toGoodsView(goods.id)">
                <div class="pic">
                    <el-image :src="`${SERVER_ADDR}/goods/pic/${goods.picList[0].url}`"
                              style="margin-top: 10px; height: 180px; width: 200px;" fit="contain"/>
                </div>
                <div class="name">{{ goods.name }}</div>
                <div class="dscp">{{ goods.dscp }}</div>
                <div class="markPrice">￥ {{ goods.markPrice }}</div>
                <div class="price">￥ {{ goods.price }}</div>
            </li>
        </ul>
    </div>
    <el-row class="row-bg" justify="center" style="padding-top: 20px;">
        <el-form-item>
            <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                           :page-size="pageInfo.pageSize" @change="search"/>
        </el-form-item>
        <el-form-item>
            <el-select v-model="pageInfo.pageSize" placeholder="每页显示条数" style="width: 100px; padding-left: 40px"
                       @change="search(pageInfo.pageNum)">
                <el-option label="20条" :value="20"/>
                <el-option label="30条" :value="30"/>
                <el-option label="40条" :value="40"/>
            </el-select>
        </el-form-item>
    </el-row>
</template>

<script setup>

import {ref, watch} from "vue";
import categoryApi from "@/api/CategoryApi.js";
import goodsApi from "@/api/goodsApi.js";
import {useRouter} from "vue-router";
const router = useRouter()
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);

const props = defineProps({
    categoryId: String,
    keyword: String
});

//所有需要显示的父分类
const parentList = ref([]);
//所有要显示的子分类
const childrenList = ref([]);
//被选中的父分类
const parentSelected = ref({});
//被选中的子分类
const childrenSelected = ref({});
//被选中的分类id - 父 or 子
const selectedId = ref(null);
//分页信息
const pageInfo = ref({
    pages: 0,
    pageNum: 0,
    pageSize: 20
});
//获取父分类
function getParentList() {
    const condition = {
        parentId: 0,
        status:1
    };
    categoryApi.selectByPage(condition)
        .then(resp => {
            parentList.value = resp.data;
            //假设没有通过路径传递参数或者传递的id在父分类下不存在
            let flag = true;
            parentList.value.forEach(c => {
                if (props.categoryId == c.id) {
                    flag = false;
                    selectParent(c);
                }
            });
            if (flag) {
                selectParent({});
            }
        })
}
getParentList();

//点击父分类调用的函数
function selectParent(category) {
    parentSelected.value = category;
    //清空子分类
    childrenList.value = [];
    childrenSelected.value = {};
    //给被选中的分类id赋值
    if (parentSelected.value.id) {
        selectedId.value = parentSelected.value.id;
    } else {
        selectedId.value = null;
    }
    //给被选中的父分类下的子分类赋值
    if (category.childList) {
        //childrenList.value = category.childList;
        category.childList
            .filter(c => c.status == 1)
            .forEach(c => childrenList.value.push(c))
    }
    search(1);
}
//点击子分类调用的函数
function selectChildren(category) {
    childrenSelected.value = category;
    //给被选中的分类id赋值
    if (childrenSelected.value.id) {
        selectedId.value = childrenSelected.value.id;
    } else {
        selectedId.value = parentSelected.value.id;
    }
    search(1);
}
//搜索
function search(pageNum) {
    const condition = {
        status: 1,
        categoryId: selectedId.value,
        name: props.keyword
    };
    goodsApi.selectByCondition1(condition, pageNum, pageInfo.value.pageSize)
        .then(resp => {
            pageInfo.value = resp.data;
        })
}

watch(props, () => {
    getParentList()
})
function toGoodsView(id) {
  //跳转到商品详情页
  router.push({
    path: '/user/goods',
    query: {
      id
    }
  })}
</script>

<style scoped>
    .category ul li {
        float: left;
        margin: 10px 20px;
        font-size: 14px;
        cursor: pointer;
    }
    .active {
        color: var(--theme-color);
        font-weight: bold;
    }
    .goodsList ul li {
        width: 224px;
        float: left;
        margin-right: 20px;
        text-align: center;
        background-color: #eee;
        margin-bottom: 15px;
    }
    .goodsList ul li:hover {
        box-shadow: 0 0 15px #000;
        cursor: pointer;
    }
    .goodsList ul li:nth-child(5n) {
        margin-right: 0;
    }
    .name .dscp .price {
        line-height: 25px;
    }
    .name {
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dscp {
        color: #aaa;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .markPrice {
        font-size: 14px;
        float: left;
        margin-left: 40px;
        text-decoration: line-through;
        color: var(--theme-color);
    }
    .price {
        font-size: 16px;
        color: var(--theme-color);
    }
</style>